<template>
  <div class="share">
    <div class="circle"></div>
    <el-drawer
      v-model="isShowShare"
      :title="`分配${props.shareType}`"
      direction="rtl"
      size="45%"
      @close="closeShareDialog"
      @opened="loadContent"
      :close-on-click-modal="false"
    >
      <el-input
        v-model="searchName"
        style="width: 40%; margin-bottom: 20px"
        placeholder="搜索销售员姓名"
        clearable
      >
        <template #append>
          <el-button icon="Search" @click="loadContent" />
        </template>
      </el-input>
      <el-table
        ref="singleTableRef"
        :data="staffList"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column property="nickName" width="40">
          <template #default="scope">
            <div
              class="single-button"
              :class="{ 'active-button': activeButton === scope.$index }"
            ></div>
          </template>
        </el-table-column>
        <el-table-column
          property="nickName"
          label="老师昵称"
          width="200"
          align="left"
        />
        <el-table-column
          property="mobile"
          label="手机号"
          width="180"
          align="center"
        />
        <el-table-column
          property="num"
          label="已分配在读学员数"
          align="center"
        />
      </el-table>
      <pagination
        :total="total"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        @pagination="loadContent"
      />
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认分配</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import {
  getAssignStudents,
  getPeopleJobList,
  getManagerJobList,
} from "@/api/studentManagement/index.js";
import { ref, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";

const props = defineProps({
  isShowShare: {
    type: Boolean,
    default: false,
  },
  students: {
    type: Array,
    default: [],
  },
  shareType: {
    type: String,
  },
});
// 控制开关
const emit = defineEmits(["update:isShowShare", "update:tableList"]);
const isShowShare = ref(props.isShowShare);
watch(
  () => props.isShowShare,
  (newValue) => {
    isShowShare.value = newValue;
  }
);
const closeShareDialog = () => {
  searchName.value = null;
  isShowShare.value = false;
  emit("update:isShowShare", false);
};
//分配学员方法
const toGetAssignStudents = async () => {
  let ids = [];
  props.students.map((item) => {
    ids.push(item.id);
  });
  let params = {};
  if (props.shareType === "跟进人") {
    params = {
      ids,
      counselorId: currentRow.value.id,
    };
  } else if (props.shareType === "学管师") {
    params = {
      ids,
      managementId: currentRow.value.id,
    };
  }

  try {
    const res = await getAssignStudents(params);
    if (res.code == 200) {
      // StaffList.value = res.rows
      emit("update:tableList");

      ElMessage({
        message: "学员分配成功",
        type: "success",
      });
    }
  } catch (error) {
    console.error("分配学员失败:", error);
  }
};
//确定取消按钮
function cancelClick() {
  closeShareDialog();
}
function confirmClick() {
  ElMessageBox.confirm(`确定分配吗?`)
    .then(() => {
      toGetAssignStudents();
      closeShareDialog();
    })
    .catch(() => {
      // catch error
    });
}
//单选选中
const currentRow = ref();
const selectedIndex = ref(-1);
const activeButton = ref(null);
const handleCurrentChange = (row) => {
  currentRow.value = row;
  selectedIndex.value = staffList.value.indexOf(row); // 获取行索引
  activeButton.value = selectedIndex.value;

  console.log("777", selectedIndex.value);
};
//分页器
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const searchName = ref("");
//跟进人
const toFollowPeopleList = async () => {
  try {
    const res = await getPeopleJobList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      wxParam: searchName.value,
    });
    if (res.code == 200) {
      staffList.value = res.rows;
      total.value = res.total;
      // const filteredStaffList = res.rows.filter((staff) => staff.isJob)
    }
  } catch (error) {
    console.error("获取跟进人下拉列表失败:", error);
  }
};
//学管师
const toGetManagerList = async () => {
  try {
    const res = await getManagerJobList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      wxParam: searchName.value,
    });
    if (res.code == 200) {
      staffList.value = res.data;
      total.value = res.total;
    }
  } catch (error) {
    console.error("获取学管师下拉列表失败:", error);
  }
};
const staffList = ref([]);
const loadContent = () => {
  if (props.shareType === "跟进人") {
    toFollowPeopleList();
  } else if (props.shareType === "学管师") {
    toGetManagerList();
  }
};
</script>

<style lang="scss" scoped>
.share {
  .single-button {
    width: 15px;
    height: 15px;
    border-radius: 50%;

    border: 1px solid #e9e9eb;
  }
  .active-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    // background-color: #409eff;
    border: 1px solid #409eff;
    padding: 3px;
    &::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #409eff;
    }
  }
}
</style>